/**
 * 开店星公众版
 * @description 基于Yii2+Vue2.0+uniapp研发，H5+小程序+公众号全渠道覆盖，功能完善开箱即用，框架成熟易扩展二开
 * @author 青岛开店星信息技术有限公司
 * @link https://www.kaidianxing.com
 * @copyright Copyright (c) 2020-2022 Qingdao ShopStar Information Technology Co., Ltd.
 * @copyright 版权归青岛开店星信息技术有限公司所有
 * @warning Unauthorized deletion of copyright information is prohibited.
 * @warning 未经许可禁止私自删除版权信息.
 */ 
<template>
    <Container>
        <!-- 面包屑-->
        <Breadcrumbs :list="breadcrumbsList"></Breadcrumbs>
        <!--秒杀-->
        <Seckill :show-title="false" :minisize="false" :seckillActivityInfo="seckillActivityInfo"></Seckill>

    </Container>
</template>

<script>
import Seckill from '@/components/seckill/Seckill'
import indexApi from '@/api/main'

export default {
    components: {
        Seckill
    },
    data() {
        return {
            temp: null,
            breadcrumbsList: [{
                name: '首页',
                path: '/'
            }, {
                name: '秒杀专场',
                path: '/seckillArea/index'
            }],
            seckillActivityInfo: {}
        }
    },
    created() {
        this.getData()
    },
    methods: {
        getData() {
            indexApi.getCount({
                hideSuccessTip: true,
                success: (res) => {
                    if (res.error !== 0) return
                    this.seckillActivityInfo = res.data.seckillActivityInfo || null //秒杀活动

                }
            })
        }
    }
}
</script>

<style scoped lang="scss">

.boxs-container {
    width: 100%;
    height: auto;

}

.boxs {
    position: relative;
    width: 1200px;
    height: auto;
    padding-bottom: 26px;
    margin: 0 auto;
}

.top-kv {
    padding-bottom: 40px;
}

.boxs-top {
    width: 100%;
    padding-bottom: 20px;

    > .flex {
        width: 100%;
        justify-content: space-between;
        height: 28px;
        align-items: flex-end;
    }

    .top-title {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        //color: #212121;
    }

    .top-more {
        display: flex;
        align-items: center;
        color: #81878E;
        font-size: 16px;
        cursor: pointer;

        &:hover {
            color: $theme-color;
        }

        i {
            margin-left: 6px;
            font-size: 18px;

        }

    }

}

.boxs-content {
    display: flex;
    align-items: center;
}

.box-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    width: 100%;
    height: 100%;

    .box-item {
        position: relative;
        margin: 0 0 14px 14px;
        width: 229px;
        overflow: hidden;
        height: 400px;
        background: #fff;
        transition: all 0.3s;

        &:nth-child(1) {
            margin-left: 0;
        }

        &:nth-child(5n) {
            margin-left: 13px;
        }

        &:nth-child(5n + 1) {
            margin-left: 0px;
        }

        &:hover {
            transform: translateY(-1px);
            box-shadow: 5px 5px 20px #ccc;
        }

        &.box-item-seckill { //主推图尺寸
            margin-left: 0px;
            width: 229px;
            height: 400px;
            background-image: url("../../../static/images/seckill/seckilBg.png");
            background-size: 229px 400px;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: space-between;
            padding-top: 40px;
            padding-bottom: 40px;

            h4 {
                font-size: 38px;
                line-height: 56px;
                color: #FFFFFF;
            }

            .time-box {
                .time-tip {
                    color: #FFFFFF;
                    font-size: 20px;
                    line-height: 30px;
                    font-weight: 600;

                    span {
                        font-weight: normal;
                        font-size: 16px;
                    }
                }

                .time-out {
                    margin-top: 30px;
                    height: 32px;
                    display: flex;
                    align-items: center;
                    color: #ffffff;
                    font-weight: 600;
                    justify-content: center;

                    span {
                        line-height: 32px;
                        text-align: center;
                        display: block;
                        min-width: 32px;
                        height: 32px;
                        font-size: 18px;
                        background: #3E413E;

                    }

                    i {
                        font-size: 22px;
                        width: 16px;
                        height: 32px;
                        line-height: 32px;
                        text-align: center;
                    }

                    .day {

                        width: 30px;
                        font-size: 18px;
                        line-height: 32px;
                    }
                }
            }
        }

        img {
            display: block;
            width: 229px;
            height: 280px;
            margin: 0 auto;
        }

        .goodsInfo {
            height: 120px;
            padding: 20px 10px 0;

            .item-title {
                font-size: 16px;
                line-height: 22px;
                text-align: left;
                font-weight: normal;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }

            .item-price {
                margin-bottom: 8px;
                color: $price-color;
                font-size: 20px;
                line-height: 28px;
                font-weight: 600;
            }

            .item-old-price {
                font-weight: normal;
                margin-left: 10px;
                color: #AAB3BD;
                font-size: 14px;
                line-height: 20px;
                text-decoration: line-through;
            }
        }

    }
}
</style>
